<template>
  <div>
    <h3>ikun黑店</h3>
    <MyProduct
      v-for="item in list"
      :key="item.id"
      :price="item.proPrice"
      :title="item.proName"
      :desc="item.desc"
      :id="item.id"
      @bargin="bargin"
    ></MyProduct>
  </div>
</template>

<script>
//引入组件
import MyProduct from './components/MyProduct.vue'

export default {
  components: {
    MyProduct,
  },

  data() {
    return {
      list: [
        {
          id: 1,
          proName: '棒棒糖',
          proPrice: 188,
          low: 160,
          desc: '甜',
        },
        {
          id: 2,
          proName: '大鸡腿',
          proPrice: 360,
          low: 320,
          desc: '香',
        },
        { id: 3, proName: '冰激凌', proPrice: 42, low: 30, desc: '冰' },
        { id: 4, proName: '冰激凌', proPrice: 42, low: 30, desc: '冰' },
      ],
    }
  },

  methods: {
    bargin(id) {
      const res = this.list.find((item) => item.id === id)
      res.proPrice -= 10
      if (res.proPrice > res.low) {
        return alert('砍价成功')
      } else {
        res.proPrice = res.low
        return alert('别砍价啦，成本价啦！')
      }
    },
  },
}
</script>

<style>
.product {
  width: 400px;
  border: 3px solid #000;
  border-radius: 5px;
  margin: 10px;
  padding: 0 20px;
}
</style>
